<template>
  <transition name="componentTab">
    <div class="detail">
      <div class="top">
        <header class="header">
          <van-icon name="arrow-left" @click.stop="$router.go(-1)" />
          <div class="tag">{{ tagTitle }}</div>
        </header>
        <div class="order">
          <div :class="{ active: active == 0 }" @click.stop="active = 0">
            综合
          </div>
          <div :class="{ active: active == 1 }" @click.stop="active = 1">
            销量
          </div>
          <div :class="{ active: active == 2||active==3 }" @click.stop="active = active!=2&&active!=3?2:3">
            价格
          </div>
          <div :class="{ active: active == 4 }" @click.stop="active = 4">
            新品
          </div>
        </div>
        <div class="tags">
          <div
            :class="{ activeTag: nowTag.t.id == tag.t.id }"
            v-for="(tag, index) in tags"
            :key="index"
            @click="changeTag(tag)"
          >
            {{ tag.t.n }}
          </div>
        </div>
      </div>
      <section v-show="list?.length>0" class="content" title="标签内容">
        <StoreItem
            v-for="(storeItem, index) in list"
            :key="storeItem.store_id + '' + index"
            :storeItem="storeItem"
          />
      </section>
      <section v-show="!list?.length" class="content">暂无商品信息</section>
    </div>
  </transition>
</template>

<script>
import qs from "qs";
import StoreItem from "@/components/StoreItem.vue";
export default {
  components:{
    StoreItem
  },
  data: () => {
    return {
      tagTitle: "",
      list: null,
      tags: [],
      or: 0,
      s: 1,
      active: 0,
      nowTag: { t: { id: 0 } },
    };
  },
  watch:{
    active(val){
      this.or = val;
      this.getList(parseInt(this.nowTag.t.id));
    }
  },
  methods: {
    changeTag(tag){
      this.nowTag = tag;
      this.getList(parseInt(this.nowTag.t.id));
    },
    getList(id) {
      this.axios({
        method: "post",
        url: `${this.api.baseUrlV2}/ptag/products/0/30`,
        data: qs.stringify({
          id: id,
          or: this.or,
          s: this.s,
        }),
        headers: {
          version: this.api.version,
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        },
      }).then((res) => {
        console.log(res);
        if(res.data.result?.ts?.length){
          this.tags = res.data.result.ts;
          console.log(this.tags);
          this.nowTag = this.tags[0];
        }
        this.list = res.data.result.ps;
      });
    },
  },
  activated() {
    this.tagTitle = localStorage.getItem("storetag");
    this.nowTag = { t: { id: this.$route.params.tagid } };
    this.getList(this.$route.params.tagid);
  },
};
</script>

<style lang="scss" scoped>
.detail {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: var(--bgc-white);
  overflow: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .top {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: var(--bgc-white);
    .header {
      width: 100%;
      height: 0.5rem;
      box-sizing: border-box;
      padding: 0 0.15rem;
      display: flex;
      align-items: center;
      font-size: 0.25rem;
      .tag {
        font-size: 0.2rem;
        margin-left: 0.4rem;
      }
    }
    .order {
      width: 100%;
      height: 0.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 0.15rem;
      > div {
        position: relative;
        flex: 1;
        text-align: center;
        height: 100%;
        line-height: 0.5rem;
        transition: 0.3s;
        &::after {
          position: absolute;
          display: block;
          width: 60%;
          height: 0.04rem;
          content: "";
          background-color: transparent;
          left: 0;
          right: 0;
          bottom: 0.04rem;
          margin: 0 auto;
          border-radius: 0.02rem;
          transition: 0.3s;
        }
      }
      .active {
        color: var(--text-yellow);
        &::after {
          background-color: var(--bgc-yellow);
        }
      }
    }
    .tags {
      width: 100%;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 0.15rem;
      padding-bottom: 0.1rem;
      margin-top: 0.05rem;
      > div {
        margin-right: 0.1rem;
        height: 0.32rem;
        line-height: 0.32rem;
        color: var(--text-black);
        background-color: var(--text-white);
        transition: .3s;
        padding: 0 0.06rem;
        border-radius: 0.04rem;
      }
      .activeTag{
        color: var(--text-white);
        background-color: var(--bgc-yellow);
      }
    }
  }
  .content {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 0.15rem;
    padding-top: 0.05rem;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
</style>